<template>
    <div class="selltype">
        <SerachBar/>
        <div class="st_content_body">
            <div class="content">
                <div class="content-left">
                    <div class="wrapper " ref="typeleft">
                        <div>
                            <TypeLeft  :typeleft="selltype.tleft" ></TypeLeft>                                                        
                        </div>
                    </div>
                </div>
                <div class="content-right">
                    <div class="wrapper" ref="typeright">
                        <div class="right">
                            <TypeRight :typeright="selltype.tright" :typelist="selltype.tlist" :typeget="selltype.tget"></TypeRight>
                            <!-- <TypeRight v-for="( item ,i) of selltype.tright" :key="'st'+i" :tright="item" :str="item.link | getData"></TypeRight> -->
                            <div class="null" v-for="( item ,i) of (3-(selltype.tright.length%3==0?3:selltype.tright.length%3))" :key="'null'+i"></div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>   
        <FootBar/>
    </div>
</template>

<script>
import BScroll from "better-scroll";
import TypeLeft from "./typeComponents/TypeLeft";
import TypeRight from "./typeComponents/TypeRight";
import TypeRightList from "./typeComponents/TypeRightList";



import { mapState, mapMutations, mapActions, mapGetters } from "vuex";


export default {
    data() {
        return {
            flag:0,
        };
    },
    components: {
        TypeLeft,
        TypeRight,
        TypeRightList
    },
    computed:{
        ...mapState(['selltype'])
    },
    methods:{
        getTypeLeftScroll() {
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.typeleft, {
                    click:true
                });
            });
        },
        getTypeRightScroll() {
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.typeright, {
                    click:true
                });
            });
        },
        ...mapActions(['TypeLeftData']),
        ...mapActions(['TypeRightData']),
        // ...mapActions(['TypeListData']),
        ...mapActions(['TypeRightListClass'])
    },
    mounted(){
        this.getTypeLeftScroll();
        this.getTypeRightScroll();
        this.TypeLeftData();
        this.TypeRightData();
        // this.TypeListData();
        this.TypeRightListClass();
    }
};
</script>

<style lang='less' scoped>
.selltype {
    width: 100%;
    height: 100%;
    .st_content_body {
        width: 100%;
        height: 100%;
        .content {
            width:100%; 
            height: 100%;
            display: flex;
            .content-left{
                width:180px;
                position: absolute;
                top: 100px;
                left: 0px;
                right: 0px;
                bottom: 100px;
                .wrapper{
                    width:100%;
                    height:100%;
                }
            }
            .content-right{
                flex:1;
                position: absolute;
                top: 100px;
                left: 180px;
                right: 0px;
                bottom: 100px;
                .wrapper{
                    width:100%;
                    height:100%;
                    .right{
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-around;
                        .null{
                            width:160px;
                            height:190px;
                            margin-top:20px;
                            margin-bottom: 20px;
                        }
                    }
                }
            }
        }
    }
}



    .aa{
        height:900px;
    }
</style>
